<template>
	<view class="page">
		<view class="tab">
			<view class="item" :class="{ actived: tabIndex == i }" v-for="(item, i) in tab" :key="item.name"
				@click="change(i)">
				<div class="title">{{ item.name }}</div>
				<view class="gap" v-if="tabIndex == i"></view>
			</view>
		</view>

		<view class="manuscript">
			<view class="manuscript-container" v-if="filedata">
				<image class="manuscript-img" :src="filedata" mode="aspectFill"></image>
				<image src="@/static/images/icon_shanchu@2x.png" class="delete" @click="deleteFileImg">
				</image>
			</view>
			<view class="btn" v-if="!filedata">
				<image class="btn-icon" src="@/static/images/icon_xiangaotu@2x.png"></image>
				<text class="btn-text">点击上传线稿图</text>
				<uv-upload name="0" :maxCount="1" width="686rpx" height="142rpx" @afterRead="afterFiledata">
				</uv-upload>
			</view>
		</view>

		<view class="model">
			<view class="title"></view>
			<navigator url="" class="more">点击选择更多模型风格</navigator>
			<div class="list">
				<uv-grid :border="false">
					<uv-grid-item v-for="(item,index) in 6" :key="index">
						{{index}}
					</uv-grid-item>
				</uv-grid>
			</div>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

import {
    apiGetImg2Img
} from '@/api/defaultApi.js'



	//  tab
	const tab = [{
		name: '快速绘图'
	}, {
		name: '局部重绘'
	}]
	// 登录方式
	const tabIndex = ref(0)

	// 上传的图片
	const filedata = ref('') //线稿图
	const filedata1 = ref('') //添加风格彩色参考图
	const filedata2 = ref('') //场景通道图



	// 切换方式
	const change = (i) => {
		if (i == 1) {
			uni.showModal({
				title: '提示',
				content: '局部重绘功能暂未开放！',
				showCancel: false
			})
			return
		}
		tabIndex.value = i
	}



	// 上传线稿图
	const afterFiledata = async (event) => {
		filedata.value = event.file.url
	}

	//删除线稿图
	const deleteFileImg = (event) => {
		filedata.value = ''
	}
	
	
	const getImg2Img = async() => {
		let res = await apiGetImg2Img({})
	}
</script>

<style lang="scss" scoped>
	.tab {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 8rpx auto 40rpx;

		.item {
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.actived {
				color: #FFCB30;
			}

			.title {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}

			.gap {
				height: 8rpx;
				background: #ffcb30;
				border-radius: 4rpx;
				width: 88rpx;
			}
		}
	}

	.manuscript {
		.manuscript-container {
			width: 100%;
			height: 386rpx;
			background: #ececec;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.manuscript-img {
				width: 100%;
				height: 100%;
			}

			.delete {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
			}
		}

		.btn {
			width: 100%;
			height: 142rpx;
			background: linear-gradient(65deg, #ff8a63 0%, #ffde7d 100%), #3bac72;
			border-radius: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;

			.btn-icon {
				width: 40rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.uv-upload {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}

	.model{
		width: 100%;
		height: 480rpx;
		background: #191919;
		border-radius: 20rpx;
		margin: 20rpx auto ;
		overflow: hidden;
	}
	
</style>